<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>新增教练账户</title>
<meta name="description" content="这是一个 index 页面">
<meta name="keywords" content="index">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="icon" href="images/browserLOGO2.png" type="image/x-icon" />
<link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
<meta name="apple-mobile-web-app-title" content="Amaze UI" />
<link rel="stylesheet" href="assets/css/amazeui.min.css" />
<link rel="stylesheet" href="assets/css/admin.css">
<link rel="stylesheet" href="css/layer-animate.css">
<link rel="stylesheet" href="css/profilestyle.css">
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=rsi8ehEBjC2RV6a6Nbgwt7e0RjSv8lRH"></script>
<script type="text/javascript" src="js/selectAddress.js"></script>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/app.js"></script>

<style type="text/css">
.lockButton{
	border:1px solid darkgrey;
	border-radius:10px;
	background-color: white;
	width:35px;
	background-image: url(assets/img/封号.png);
	background-repeat: no-repeat;
	background-position: center;
}
.unlockButton{
	border:1px solid darkgrey;
	border-radius:10px;
	background-color: white;
	width:35px;
	background-image: url(assets/img/解封.png);
	background-repeat: no-repeat;
	background-position: center;
}

 .boxOuter{
	width: 100%;
	text-align: center;
	height: 20px;
	margin-bottom: 3px;
	}
	
.boxInner{
	width: 50%;
	float: left;
	font-size: 20px;
	}
	
#allmap {
		width: 100%;
		height: 300px;
		overflow: hidden;
		margin:0;
		font-family:"微软雅黑";
	}
	
.alertMes{
		float: left;
		margin-left: 20px;
		color: red;
}
</style>

</head>
	<!--[if lte IE 9]><p class="browsehappy">升级你的浏览器吧！ <a href="http://se.360.cn/" target="_blank">升级浏览器</a>以获得更好的体验！</p><![endif]-->

<body>
	<!------------------------------>
	<!------------ 隐藏域  ------------>
	<!------------------------------>
	


	<!---------------------------->
	<!------------ 顶部  ------------>
	<!---------------------------->
	<%@include file="jsp/adminHeader.jsp"%>
	<!---------------------------->
	<!---------------------------->

	<div class="am-cf admin-main">

	<!--------------------------------->
	<!------------ 左侧导航栏部  ------------>
	<!---------------------------------->
	<%@include file="jsp/adminLeftNavi.jsp" %>
	<!---------------------------------->
	<!---------------------------------->

		<div class=" admin-content">

			<!----------------------------------->
			<!------------ 内容顶部导航栏  ------------>
			<!----------------------------------->
			<%@include file="jsp/adminInnerTitleNavi.jsp" %>
			<!----------------------------------->
			<!----------------------------------->

			<div class="admin-biaogelist">
				<div class="listbiaoti am-cf">
					<ul class="am-icon-flag on">新增教练账户</ul>
					<dl class="am-icon-home" style="float: right;">
						当前位置： <a href="index_teacher.jsp">首页</a> >
						<a href="javaScript:void(0)">教练管理</a>>
						<a href="javaScript:void(0)">新增教练账户</a>
					</dl>
				</div>

  <div class="am-tabs am-margin" data-am-tabs>
    <ul class="am-tabs-nav am-nav am-nav-tabs">
      <li><a href="javaScript:void(0)">填写账户信息</a></li>
    </ul>

    <div class="am-tabs-bd">
      <div class="am-tab-panel am-fade" id="tab3">
        <form class="am-form">
			<div class="xitong">
				<div class="am-alert am-alert-success" data-am-alert>
					<p>教练账户基本信息（由业务员提前与教练沟通获取以下基本信息）</p>
				</div>
    
				<div class="am-form-group">
					<div class="zuo">姓名：</div>
					<div class="you" style="max-width: 300px;">
						<input type="text" class="am-input-sm" id="name" placeholder="请输入姓名">
					</div>
					<span class="alertMes" id="alertName"></span>
				</div>
        
				<div class="am-form-group">
					<div class="zuo">年龄：</div>
					<div class="you" style="max-width: 300px;">
						<input type="text" class="am-input-sm" id="age" placeholder="请输入年龄">
					</div>
					<span class="alertMes" id="alertAge"></span>
				</div>
				
				<div class="am-form-group">
					<div class="zuo">性别：</div>
					<div class="you" style="margin-top: 4px;">
						<label class="am-radio-inline">
							<input type="radio"  value="男" name="sex" checked="checked"> 男
						</label>
						<label class="am-radio-inline">
							<input type="radio" value="女" name="sex"> 女
						</label>
					</div>
					<span class="alertMes" id="alertSex"></span>
				</div>
        
				<div class="am-form-group">
					<div class="zuo">联系电话：</div>
					<div class="you" style="max-width: 300px;">
						<input type="text" class="am-input-sm" id="phone" placeholder="请输入电话号码">
					</div>
					<span class="alertMes" id="alertPhone"></span>
				</div>
        
				<div class="am-form-group">
					<div class="zuo">邮箱：</div>
					<div class="you" style="max-width: 300px;">
						<input type="text" class="am-input-sm" id="email" placeholder="请输入电子邮箱地址">
					</div>
					<span class="alertMes" id="alertEmail"></span>
				</div>
        
				<div class="am-form-group">
					<div class="zuo">地址：</div>
					<div class="you" style="max-width: 300px;">
						<input type="text" class="am-input-sm" id="selectAdd" placeholder="请选择地址">
					</div>
					<span class="alertMes" id="alertAdd"></span>
				</div>
				
				<div class="am-form-group">
				<span style="float: left;">省：</span><select id="cmbProvince" style="margin-left:10px;width: 150px;font-size: 14px;float: left;"></select>
				<span style="float: left;margin-left:10px;">市：</span><select id="cmbCity" style="margin-left:10px;width: 150px;font-size: 14px;float: left;"></select>
				<span style="float: left;margin-left:10px;">区：</span><select id="cmbArea" style="margin-left:10px;width: 150px;font-size: 14px;float: left;"></select>
				</div>
				<!-- 百度地图显示区，窗口大小设置在上面 -->
				<div  class="am-form-group" id="allmap"></div>
			</div>
        </form>
      </div>

    </div>
  </div>

  <div class="am-margin">
    <button type="button" class="am-btn am-btn-success am-radius" onclick="commitAdd()">提交保存</button>
    <button type="button" class="am-btn am-btn-primary am-radius" style="margin-left: 10px;" onclick="truncate()">清空内容</button>
  </div>
				

			</div>

		</div>

	</div>

	<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/polyfill/rem.min.js"></script>
<script src="assets/js/polyfill/respond.min.js"></script>
<script src="assets/js/amazeui.legacy.js"></script>
<![endif]-->

	<!--[if (gte IE 9)|!(IE)]><!-->
	<script src="assets/js/amazeui.min.js"></script>
	<script type="text/javascript" src="js/method.js"></script>
	<!--<![endif]-->

<script type="text/javascript">
	$(function(){
		
	});
	
	
	addressInit('cmbProvince', 'cmbCity', 'cmbArea', '四川', '成都市', '武侯区');    //初始化下拉框信息显示
	// 百度地图API功能
	var map = new BMap.Map("allmap");    // 创建Map实例
	map.centerAndZoom(new BMap.Point(104.07, 30.67), 13);  // 初始化地图,设置中心点坐标和地图级别
	//添加地图类型控件
	map.addControl(new BMap.MapTypeControl({
		mapTypes:[
            BMAP_NORMAL_MAP,
            BMAP_HYBRID_MAP
		]}))
	map.setCurrentCity("成都");
	map.enableScrollWheelZoom(true);         //启用滚轮缩放
	
	var geoc = new BMap.Geocoder();    
	map.addEventListener("click", function(e){        //监听地图点击事件
		map.clearOverlays();     //清除当前地图上存在的点
		//alert(e.point.lng + "," + e.point.lat);  //获取点击地区经纬度坐标
		var point2 = new BMap.Point(e.point.lng, e.point.lat);
		map.addOverlay(new BMap.Marker(point2));   //在点击的位置放置点
		var pt = e.point;
		geoc.getLocation(pt, function(rs){
			var addComp = rs.addressComponents;
			//获取点击的地址信息,是以[Object,Object]形式
			//alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
			//selectAddress即为拼接出来的在地图上点击的最终地址
			var selectAddress=addComp.province +addComp.city +addComp.district +addComp.street +addComp.streetNumber;
 			//alert(selectAddress)
 			$("#selectAdd").val(selectAddress);
		});        
	});
	
	
	$(document).ready(function(){
		$('#cmbProvince').change(function(){
			//alert($("#cmbProvince").val());
			var address=$("#cmbProvince").val()+"省"+$("#cmbCity").val()+$("#cmbArea").val();
			//alert(address);
			// 创建地址解析器实例     
			var myGeo = new BMap.Geocoder();      
			// 将地址解析结果显示在地图上，并调整地图视野    
			myGeo.getPoint(address, function(point){      
				if (point) {      
					map.centerAndZoom(point, 18);      
					//map.addOverlay(new BMap.Marker(point));      
				}      
			 }, 
			$("#cmbCity").val());
		})
		
		$('#cmbCity').change(function(){
			//alert($("#cmbProvince").val());
			var address=$("#cmbProvince").val()+"省"+$("#cmbCity").val()+$("#cmbArea").val();
			//alert(address);
			// 创建地址解析器实例     
			var myGeo = new BMap.Geocoder();      
			// 将地址解析结果显示在地图上，并调整地图视野    
			myGeo.getPoint(address, function(point){      
				if (point) {      
					map.centerAndZoom(point, 18);      
					//map.addOverlay(new BMap.Marker(point));      
				}      
			 }, 
			$("#cmbCity").val());
		})
		
		$('#cmbArea').change(function(){
			//alert($("#cmbProvince").val());
			var address=$("#cmbProvince").val()+"省"+$("#cmbCity").val()+$("#cmbArea").val();
			//alert(address);
			// 创建地址解析器实例     
			var myGeo = new BMap.Geocoder();      
			// 将地址解析结果显示在地图上，并调整地图视野    
			myGeo.getPoint(address, function(point){      
				if (point) {      
					map.centerAndZoom(point, 18);      
					//map.addOverlay(new BMap.Marker(point));      
				}      
			 }, 
			$("#cmbCity").val());
		})
	})
	
	//清空已填信息
	function truncate(){
		if(confirm("确认要清空已填内容吗？此操作不可逆")){
			$("#name").val("");
			$("#age").val("");
			$("#phone").val("");
			$("#email").val("");
			$("#selectAdd").val("");
		}
	}
	
	//提交账户信息
	function commitAdd(){
		if($("#name").val()==""){
			$("#alertName").html("请输入姓名！");
		}else{
			$("#alertName").html("");
		}
		if($("#age").val()==""){
			$("#alertAge").html("请输入年龄！");
		}else{
			$("#alertAge").html("");
		}
		if($("#phone").val()==""){
			$("#alertPhone").html("请输入电话号码！");
		}else{
			$("#alertPhone").html("");
		}
		if($("#email").val()==""){
			$("#alertEmail").html("请输入电子邮箱地址！");
		}else{
			$("#alertEmail").html("");
		}
		if($("#selectAdd").val()==""){
			$("#alertAdd").html("请在地图上选择地址！");
		}else{
			$("#alertAdd").html("");
		}
		if($("#name").val()!=""&&$("#age").val()!=""&&$("#phone").val()!=""&&$("#email").val()!=""&&$("#selectAdd").val()!=""){
			$.ajax({
				url:"user/addCoach",
				type:"post",
				data:{
					cname:$("#name").val(),
					cage:$("#age").val(),
					csex:$('input[name="sex"]:checked').val(),
					uphone:$("#phone").val(),
					umail:$("#email").val(),
					address:$("#selectAdd").val()
				},
				success:function(data){
					if(data.result.indexOf('成功')!=-1){
						alert(data.result+"\n用户名："+data.account+"\n初始密码：123456");
						location.replace("CoachList.jsp");
					}else{
						alert(data.result);
					}
				}
			});
		}
	}
	
</script>

</body>
</html>